// 读取文件的时候是通过commonJS的方式读取的, 所以通过commonJS的方式导出
const { DefinePlugin } = require("webpack");
const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const htmlWebpackPlugin = require("html-webpack-plugin");
const copyWebpackPlugin = require("copy-webpack-plugin");
console.log(__dirname); // 当前的绝对路径
module.exports = {
    mode: "development",
    entry: "./src/main.js",
    output: {
        filename: "js/bundle.js",
        path: path.resolve(__dirname, "./build")
        // assetModuleFilename: "img/[name].[hash:6][ext]" // 打包后默认的ext会拿到"."
    },
    module: {
        rules: [
            {
                test: /\.css$/, // 用来匹配资源 使用正则表达式   js中匹配到css文件的时候
                // loader: "css-loader"  简写                      // {loader: "css-loader"}   最完整的写法
                use: [
                    // {
                    //     loader: "css-loader"
                    // }
                    // loader的处理顺序是从下往上处理的，从后往前进行处理的
                    "style-loader", // 通过业内样式的方式进行引入的
                    // "css-loader", // 是上面内容的简写
                    {
                        loader: "css-loader",
                        options: {
                            importLoaders: 1 // 如果遇到了@import,会回过头去让postCss-loader进行处理的
                        }
                    },
                    // {
                    //     loader: "postcss-loader",
                    //     options: {
                    //         // 这部分内容是根据编写的loader决定的
                    //         postcssOptions: {
                    //             plugins: [
                    //                 // 依赖多个插件
                    //                 // require("autoprefixer"),
                    //                 // require("postcss-preset-env")
                    //                 "postcss-preset-env" // 等同于requrie的写法,简写
                    //             ]
                    //         }
                    //     }
                    // }
                    "postcss-loader"
                ]
            },
            {
                test: /\.less$/,
                use: [
                    "style-loader",
                    // "css-loader",
                    {
                        loader: "css-loader",
                        options: {
                            importLoaders: 2 // 被前面处理过的loader再次进行处理一次
                        }
                    },
                    "postcss-loader",
                    "less-loader"
                ]
            },
            {
                test: /\.(png|jpe?g|gif|svg)$/,
                // type: "asset/resource", // 两种方式实现图片的固定放置  file-loader的效果
                // type: "asset/inline" // 类似于url-loader
                type: "asset", // 小的生成base64，打包到图片库
                generator: {
                    filename: "img/[name].[hash:6][ext]"
                },
                parser: {
                    dataUrlCondition: {
                        maxSize: 100 * 1024
                    }
                }
            },
            {
                test: /\.ttf|eot|woff2?$/i,
                type: "asset/resource",
                generator: {
                    filename: "font/[name][ext]"
                }
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new htmlWebpackPlugin({
            title: "王者荣耀",
            template: "./public/index.html"
        }), // 帮助生成一个模板，根据ejs模板生成的
        new DefinePlugin({
            BASE_URL: '"./"'
        }),
        new copyWebpackPlugin({
            patterns: [
                {
                    from: "public",
                    // to: ""   //不写的时候会自动根据output中的值自动查找
                    globOptions: {
                        ignore: [
                            "**/index.html",
                            "**/.DS_Store" // mac电脑需要去掉
                        ]
                    }
                }
            ]
        })
    ]
};

// {
//     test: /\.(png|jpe?g|gif|svg)$/,
//     type: "asset/resource", // 两种方式实现图片的固定放置  file-loader的效果
//     generator: {
//         filename: "img/[name].[hash:6][ext]"
//     }
// }

// {
//     test: /\.(png|jpe?g|gif|svg)$/,
//     ype: "asset/inline" // 类似于url-loader
// }

// {
//     type: "asset", // 小的生成base64，打包到图片库
//     generator: {
//         filename: "img/[name].[hash:6][ext]"
//     },
//     parser: {
//         dataUrlCondition: {
//             maxSize: 100 * 1024
//         }
//     }
// }
